<template>
	<view>
    <view class="bg-white padding-tb">
      <view class="flex align-center justify-between">
        <view class="flex align-center margin-left">
          <view class="cu-avatar xl round margin-tb solid line-xzg"  :style="'background-image:url(' + agentInfo.avatarUrl + ');'"></view>
          <view class="margin-left-sm">
            <view class="text-xl text-black">{{ agentInfo.name }}</view>
            <view class="text-sm text-xzg">
              合同到期：{{parseTime(agentInfo.contractEnd)}}
            </view>
            <view class="text-df margin-top-sm flex align-end align-start">
              <view>推广码：{{agentInfo.code}}</view>
              <view @click="openQrModal"><text class="cuIcon-qr_code margin-left-xs"></text></view>
            </view>

          </view>
        </view>
        <view class="margin-right" @click="toDaily('income')">
          <view class="flex justify-end">
            <view class='cu-tag line-red radius'>累计收益</view>
          </view>
          <view class="text-xxl text-bold margin-left-xs margin-top-xs flex justify-end align-center">
            {{ agentData.income }}￥
          </view>
          <view class="text-df margin-top-xs flex justify-end text-grey">今日 {{ agentDataDaily.income }}￥</view>
        </view>
      </view>
    </view>

    <view class="cu-card">
      <view class="cu-item shadow">
        <view class="flex align-center justify-between padding-tb padding-lr-sm">
          <view>
            <view class="text-lg">
              可提现金额（元）
            </view>
            <view class="text-xxl margin-tb-sm">
              {{agentData.leftIncome}}
            </view>
            <view class="text-df flex align-center">
              <view class="text-grey">每日 9:00~17:00 可提现</view>
              <view class="margin-left-xs" @click="toExtract">提现记录<text class="cuIcon-right"></text></view>
            </view>
          </view>
          <view>
            <view>
              <button class="cu-btn bg-xzg" :disabled="agentData.leftIncome === 0" @click="openExtractModal">提现</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-card">
      <view class="cu-item shadow margin-top-0">
        <view class="cu-list grid col-3 no-border solid-bottom" >
          <view class="cu-item" @click="toDaily('user')">
            <view class="text-lg flex align-center justify-center">
              <view>总人数</view>
              <view><text class="cuIcon-right"></text></view>
            </view>
            <view class="margin-bottom-xs margin-top-sm text-xxl">
              {{agentData.memberCount}}
            </view>
            <view class="text-grey">
              今日 {{agentDataDaily.memberCount}}
            </view>
          </view>
          <view class="cu-item" @click="toDaily('home')">
            <view class="text-lg flex align-center justify-center">
              <view>总建馆</view>
              <view><text class="cuIcon-right"></text></view>
            </view>
            <view class="margin-bottom-xs margin-top-sm text-xxl">
              {{agentData.homeCount}}
            </view>
            <view class="text-grey">
              今日 {{agentDataDaily.homeCount}}
            </view>
          </view>
          <view class="cu-item" @click="toDaily('order')">
            <view class="text-lg flex align-center justify-center">
              <view>总订单</view>
              <view><text class="cuIcon-right"></text></view>
            </view>
            <view class="margin-bottom-xs margin-top-sm text-xxl">
              {{agentData.orderCount}}
            </view>
            <view class="text-grey">
              今日 {{agentDataDaily.orderCount}}
            </view>
          </view>
        </view>
        <view class="flex align-center justify-between padding-sm" @click="openNoticeModal">
          <view class="flex align-center">
            <view class="cu-tag radius line-blue">公告</view>
            <view class="margin-left-xs">
              {{notice.title !== '' ? notice.title: '暂无通知'}}
            </view>
          </view>
          <view class="text-grey" v-if="notice.content !== ''">
            详情<text class="cuIcon-right"></text>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-card">
      <view class="cu-item shadow margin-top-0">
        <view class="flex align-center justify-between margin-sm">
          <view>数据概览</view>
          <view class="text-grey">近7日</view>
        </view>
        <view class="chart-box margin-top-xs">
          <qiun-data-charts
              type="line"
              :opts="opts"
              :chartData="chartData"
          />
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="showQrModal?'show':''">
      <view class="cu-dialog bg-white">
        <view class="cu-bar bg-white justify-end">
          <view class="content">分享推广</view>
          <view class="action" @tap="closeQrModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view>
          <tki-qrcode ref="qrcode" icon="../../static/logo.png" :onval="true" :loadMake="true" :val="qrContent" :foreground="'#C0A062'" @result="doCreateQr">
          </tki-qrcode>
        </view>
        <view class="margin-top-xs text-gray flex align-center justify-center">
          长按保存推广码
        </view>
        <view class="margin-top-sm margin-bottom flex align-center justify-center text-grey" @click="copyAgentAddress">
          复制链接 <text class="cuIcon-copy"></text>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="showExtractModal?'show':''">
      <view class="cu-dialog  bg-white ">
        <view class="cu-bar bg-white justify-end solid-bottom">
          <view class="content">收益提现</view>
          <view class="action" @tap="closeExtractModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>

        <view class="margin solid-bottom padding-bottom">
          <view class="flex justify-start">
            可提现金额：{{agentData.leftIncome}}￥
          </view>
          <view class="flex align-center justify-between margin-top">
            <view class="text-xl flex align-center justify-start flex-treble">
              <view class="flex justify-start align-center">
                <input placeholder="请输入金额" :value="extractAmount" class="text-xxl text-black text-bold" placeholder-class="text-xl" type="digit" name="input" @blur="changeExtractAmount"/>
              </view>
              <view>
                元
              </view>
            </view>
            <view class="text-xzg flex-sub" @click="fullExtract">
              全额
            </view>
          </view>
        </view>

        <view class="flex justify-between align-center margin-tb margin-lr-xl">
          <view>
            <button class="cu-btn line-xzg text-xzg" @tap="closeExtractModal">取消</button>
          </view>
          <view>
            <button class="cu-btn bg-xzg margin-left" @tap="doExtractIncome">确定</button>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="showNoticeModal?'show':''">
      <view class="cu-dialog  bg-white ">
        <view class="cu-bar bg-white justify-end solid-bottom">
          <view class="content">{{notice.title}}</view>
          <view class="action" @tap="closeNoticeModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
          <view v-html="notice.content" class="margin">
          </view>
        </view>
	  </view>
  </view>
</template>

<script>
import {MP_BASE_URL, request, showToast} from "../../utils/request";
  import {parseTime} from "../../utils/date";
  import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

  export default {
    name: 'index',
    components: {tkiQrcode},
		data() {
			return {
        agentInfo: {},
        agentData: {},
        agentDataDaily: {},
        showQrModal: false,
        showExtractModal: false,
        showNoticeModal: false,
        agentDataDailies: [],
        extractAmount: null,
        opts: {
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [15,10,0,15],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2
          },
          extra: {
            line: {
              type: "curve",
              width: 2,
              activeType: "hollow"
            }
          }
        },
        chartData: {
          categories: ["07/01","07/02","07/03","07/04","07/05","07/06", "07/07"],
          series: [
          ]
        },
        notice: {
          title: '',
          content: ''
        },
        qrContent: ''
      }
		},
    onLoad() {
      this.getAgentInfo()
    },
    onReady() {
      this.$nextTick(() => {
        this.$refs.qrcode._makeCode()
      })
    },
		onShow() {
      this.getAgentData()
      this.getAgentDataDaily()
      this.listAgentDataDailies()
      this.listAgentNotices()
		},
		methods: {
      parseTime(time) {
        return parseTime(time, '{y}-{m}-{d}')
      },
      toDaily(type) {
        uni.navigateTo({
          url: '/pages/daily/index?type=' + type
        })
      },
      openQrModal() {
        this.showQrModal = true
      },
      closeQrModal() {
        this.showQrModal = false
      },
      openExtractModal() {
        this.showExtractModal = true
      },
      closeExtractModal() {
        this.showExtractModal = false
        this.extractAmount = null
      },
      toExtract() {
        uni.navigateTo({
          url: '/pages/extract/index'
        })
      },
      getAgentInfo() {
        request({url: '/agent/info'}).then(res => {
          this.agentInfo = res
          this.qrContent = MP_BASE_URL + "?agentCode=" + this.agentInfo.code
        })
      },
      getAgentData() {
        request({url: '/agent/data'}).then(res => {
          this.agentData = res
        })
      },
      getAgentDataDaily() {
        request({url: '/agent/data/daily'}).then(res => {
          this.agentDataDaily = res
        })
      },
      listAgentDataDailies() {
        let today = new Date()
        let endDate = this.parseTime(today)
        today.setDate(today.getDate() - 6)
        let startDate = this.parseTime(today)
        request({url: '/agent/data/dailies?startDate=' + startDate + '&endDate=' + endDate}).then(res => {
          if (res) {
            let categories = []
            let series = [{
                name: "收益",
                data: []
              },
              {
                name: "人数",
                data: []
              },
              {
                name: "建馆",
                data: []
              },
              {
                name: "订单",
                data: []
              }]
            res.forEach(d => {
              categories.push(parseTime(d.date, '{m}/{d}'))
              series[0].data.push(d.income)
              series[1].data.push(d.memberCount)
              series[2].data.push(d.homeCount)
              series[3].data.push(d.orderCount)
            })
            this.chartData.categories = categories
            this.chartData.series = series
          }
        })
      },
      fullExtract() {
        this.extractAmount = this.agentData.leftIncome
      },
      changeExtractAmount(e) {
        let amount = parseFloat(e.detail.value)
        if (amount > this.agentData.leftIncome) {
          this.extractAmount = this.agentData.leftIncome
          return
        }
        this.extractAmount = amount
      },
      doExtractIncome() {
        request({url: '/agent/extract', method: 'post', data: {amount: this.extractAmount}}).then(res => {
          showToast('提交提现申请成功')
          this.showExtractModal = false
          this.toExtract()
        })
      },
      listAgentNotices() {
        request({url: '/agent/notices'}).then(res => {
          if (res && res.length > 0) {
            this.notice = res[0]
          }
        })
      },
      openNoticeModal() {
        this.showNoticeModal = true
      },
      closeNoticeModal() {
        this.showNoticeModal = false
      },
      copyAgentAddress() {
        showToast('复制成功')
        uni.setClipboardData({
          data: this.qrContent,
          success: function () {
          },
          fail: (e) => {
            console.log(e)
          }
        });

      }
		}
	}
</script>

<style>
.cu-list.grid > .cu-item [class*=cuIcon] {
  position: unset;
  display: unset;
  margin-top: unset;
  width: unset;
  font-size: unset;
  /* 根据需要添加更多重置 */
}
</style>
